<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 顶部 -->
      <Toptoolbar>
        <template #search>
          <el-button type="primary" @click="vischaracter=true">添加角色</el-button>
        </template>
      </Toptoolbar>
      <!-- 表格 -->
      <el-card class="box-card">
        <el-table
          :data="tableData"
          row-key="id"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="角色名称"
          />

          <el-table-column
            prop="description"
            label="角色描述"
          />
          <el-table-column
            prop="address"
            label="操作"
          >
            <template v-slot="{row}">
              <el-row type="flex">
                <el-button type="primary" size="small" @click="permbtn(row.id)">分配权限</el-button>
                <el-button type="primary" size="small" icon="el-icon-edit" @click="putrole(row.id)">编辑</el-button>
                <el-button icon="el-icon-delete" @click="delbtn(row.id)" />
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center" class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="getrolequery._limit"
            :current-page.sync="currentpage"
            @current-change="currentchange"
          />
        </el-row>
      </el-card>
      <!-- 分配权限 -->
      <addperm ref="addperm" :visrole.sync="visrole" />
      <!-- 添加角色 -->
      <addcharacter ref="addcharacter" :vischaracter.sync="vischaracter" @getlist="getlist()" />
    </div>
  </div>
</template>
<script>
import { getrolelist, delrole, gettotal } from '@/api/character'
import addperm from './components/addperm.vue'
import addcharacter from './components/addcharacter.vue'

export default {
  components: { addperm, addcharacter },
  data() {
    return {
      tableData: [],
      getrolequery: {
        _limit: 4,
        _start: 0
      },
      visrole: false, // 权限弹窗
      vischaracter: false, // 角色弹窗
      total: 0, // 数据数量
      currentpage: 1// 页码
    }
  },
  async created() {
    this.getlist()
  },
  methods: {
    // 获取角色列表
    async getlist() {
      const current = (this.currentpage - 1) * this.getrolequery._limit
      const res = await getrolelist({ _start: current, _limit: this.getrolequery._limit })
      console.log(888, res)
      this.tableData = res.data
      const total = await gettotal()
      this.total = total.data
    },
    // 分配权限
    permbtn(id) {
      this.visrole = true
      this.$refs.addperm.getperm(id)
    },
    // 编辑
    putrole(id) {
      this.$refs.addcharacter.getputrole(id)
      this.vischaracter = true
    },
    // 删除角色
    delbtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delrole(id)
        if (this.tableData.length <= 1 && this.currentpage !== 1) {
          this.currentpage--
        }
        this.$message({
          type: 'success',
          message: '删除成功'
        })

        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 切换页
    currentchange(val) {
      if (val === 1) {
        this.currentpage = 1
      } else {
        // 上一页的总数量
        this.currentpage = val
      }
      this.getlist()
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
}
</style>
